<template>
  <div>
    <div
      class="survey-com-item-container pointer flex justify-content-center align-items-center self-center pl-10 pr-10 mb-10"
      @click="addSurveyItem(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import type {SurveryListItemType} from './type.ts'
import { useEditor } from '@/store/useEditor.ts'
import { defaultStatusMap } from '@/configs/defaultStatus/defaultStatusMap.ts'
import eventBus from '@/utils/eventBus.ts'
import { MaterialComType } from '@/constants'
const store = useEditor()
const props = defineProps<{
  item:SurveryListItemType
}>();

const addSurveyItem = (item: SurveryListItemType) => {
  const materialName = item.materialCom;
  const editorComps = defaultStatusMap[materialName]()
  store.addComponent(editorComps)
  eventBus.emit('scrollBottom')
}
</script>

<style scoped lang="scss">
.survey-com-item-container {
  width: 60px;
  height: 30px;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  color: var(--font-color-light);
  user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.survey-com-item-container:hover {
  background-color: var(--font-color-lightest);
}
</style>
